<template>
  <div class="settings-page">
    <el-card>
      <template #header>
        <span>系统设置</span>
      </template>

      <el-tabs v-model="activeTab" type="border-card">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            
            <el-form-item label="系统描述">
              <el-input
                v-model="basicSettings.systemDescription"
                type="textarea"
                :rows="3"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            
            <el-form-item label="默认语言">
              <el-select v-model="basicSettings.defaultLanguage" placeholder="请选择默认语言">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="时区">
              <el-select v-model="basicSettings.timezone" placeholder="请选择时区">
                <el-option label="北京时间 (UTC+8)" value="Asia/Shanghai" />
                <el-option label="纽约时间 (UTC-5)" value="America/New_York" />
                <el-option label="伦敦时间 (UTC+0)" value="Europe/London" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 存储设置 -->
        <el-tab-pane label="存储设置" name="storage">
          <el-form :model="storageSettings" label-width="120px">
            <el-form-item label="存储类型">
              <el-radio-group v-model="storageSettings.storageType">
                <el-radio label="local">本地存储</el-radio>
                <el-radio label="oss">对象存储</el-radio>
                <el-radio label="cdn">CDN存储</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="存储路径">
              <el-input v-model="storageSettings.storagePath" placeholder="请输入存储路径" />
            </el-form-item>
            
            <el-form-item label="最大文件大小">
              <el-input-number
                v-model="storageSettings.maxFileSize"
                :min="1"
                :max="1024"
                controls-position="right"
              />
              <span style="margin-left: 8px;">MB</span>
            </el-form-item>
            
            <el-form-item label="允许的文件类型">
              <el-checkbox-group v-model="storageSettings.allowedTypes">
                <el-checkbox label="mp4">MP4</el-checkbox>
                <el-checkbox label="avi">AVI</el-checkbox>
                <el-checkbox label="mov">MOV</el-checkbox>
                <el-checkbox label="mp3">MP3</el-checkbox>
                <el-checkbox label="wav">WAV</el-checkbox>
                <el-checkbox label="flac">FLAC</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 播放设置 -->
        <el-tab-pane label="播放设置" name="player">
          <el-form :model="playerSettings" label-width="120px">
            <el-form-item label="默认音量">
              <el-slider
                v-model="playerSettings.defaultVolume"
                :min="0"
                :max="100"
                show-input
              />
            </el-form-item>
            
            <el-form-item label="自动播放">
              <el-switch v-model="playerSettings.autoPlay" />
            </el-form-item>
            
            <el-form-item label="循环播放">
              <el-switch v-model="playerSettings.loop" />
            </el-form-item>
            
            <el-form-item label="播放速度选项">
              <el-checkbox-group v-model="playerSettings.speedOptions">
                <el-checkbox label="0.5">0.5x</el-checkbox>
                <el-checkbox label="0.75">0.75x</el-checkbox>
                <el-checkbox label="1.0">1.0x</el-checkbox>
                <el-checkbox label="1.25">1.25x</el-checkbox>
                <el-checkbox label="1.5">1.5x</el-checkbox>
                <el-checkbox label="2.0">2.0x</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="画质选项">
              <el-checkbox-group v-model="playerSettings.qualityOptions">
                <el-checkbox label="360p">360p</el-checkbox>
                <el-checkbox label="480p">480p</el-checkbox>
                <el-checkbox label="720p">720p</el-checkbox>
                <el-checkbox label="1080p">1080p</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="启用访问控制">
              <el-switch v-model="securitySettings.enableAccessControl" />
            </el-form-item>
            
            <el-form-item label="允许匿名访问">
              <el-switch v-model="securitySettings.allowAnonymous" />
            </el-form-item>
            
            <el-form-item label="会话超时时间">
              <el-input-number
                v-model="securitySettings.sessionTimeout"
                :min="5"
                :max="1440"
                controls-position="right"
              />
              <span style="margin-left: 8px;">分钟</span>
            </el-form-item>
            
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="minLength">最少8位</el-checkbox>
                <el-checkbox label="requireNumber">包含数字</el-checkbox>
                <el-checkbox label="requireLetter">包含字母</el-checkbox>
                <el-checkbox label="requireSpecial">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationSettings.emailEnabled" />
            </el-form-item>
            
            <el-form-item label="SMTP服务器" v-if="notificationSettings.emailEnabled">
              <el-input v-model="notificationSettings.smtpServer" placeholder="请输入SMTP服务器地址" />
            </el-form-item>
            
            <el-form-item label="SMTP端口" v-if="notificationSettings.emailEnabled">
              <el-input-number
                v-model="notificationSettings.smtpPort"
                :min="1"
                :max="65535"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="发送邮箱" v-if="notificationSettings.emailEnabled">
              <el-input v-model="notificationSettings.senderEmail" placeholder="请输入发送邮箱" />
            </el-form-item>
            
            <el-form-item label="通知事件">
              <el-checkbox-group v-model="notificationSettings.events">
                <el-checkbox label="upload">文件上传</el-checkbox>
                <el-checkbox label="delete">文件删除</el-checkbox>
                <el-checkbox label="error">系统错误</el-checkbox>
                <el-checkbox label="storage">存储空间不足</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="settings-actions">
        <el-button type="primary" @click="saveSettings" :loading="saving">
          保存设置
        </el-button>
        <el-button @click="resetSettings">
          重置设置
        </el-button>
        <el-button type="danger" @click="exportSettings">
          导出配置
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')
const saving = ref(false)

// 基本设置
const basicSettings = reactive({
  systemName: '音视频管理系统',
  systemDescription: '专业的音视频文件管理平台',
  defaultLanguage: 'zh-CN',
  timezone: 'Asia/Shanghai'
})

// 存储设置
const storageSettings = reactive({
  storageType: 'local',
  storagePath: '/uploads',
  maxFileSize: 500,
  allowedTypes: ['mp4', 'avi', 'mp3', 'wav']
})

// 播放设置
const playerSettings = reactive({
  defaultVolume: 80,
  autoPlay: false,
  loop: false,
  speedOptions: ['0.5', '0.75', '1.0', '1.25', '1.5', '2.0'],
  qualityOptions: ['360p', '480p', '720p', '1080p']
})

// 安全设置
const securitySettings = reactive({
  enableAccessControl: true,
  allowAnonymous: false,
  sessionTimeout: 30,
  passwordPolicy: ['minLength', 'requireNumber', 'requireLetter']
})

// 通知设置
const notificationSettings = reactive({
  emailEnabled: false,
  smtpServer: '',
  smtpPort: 587,
  senderEmail: '',
  events: ['upload', 'error']
})

// 保存设置
const saveSettings = async () => {
  saving.value = true
  
  try {
    // 模拟保存API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
  } finally {
    saving.value = false
  }
}

// 重置设置
const resetSettings = () => {
  // 重置为默认值
  Object.assign(basicSettings, {
    systemName: '音视频管理系统',
    systemDescription: '专业的音视频文件管理平台',
    defaultLanguage: 'zh-CN',
    timezone: 'Asia/Shanghai'
  })
  
  Object.assign(storageSettings, {
    storageType: 'local',
    storagePath: '/uploads',
    maxFileSize: 500,
    allowedTypes: ['mp4', 'avi', 'mp3', 'wav']
  })
  
  Object.assign(playerSettings, {
    defaultVolume: 80,
    autoPlay: false,
    loop: false,
    speedOptions: ['0.5', '0.75', '1.0', '1.25', '1.5', '2.0'],
    qualityOptions: ['360p', '480p', '720p', '1080p']
  })
  
  Object.assign(securitySettings, {
    enableAccessControl: true,
    allowAnonymous: false,
    sessionTimeout: 30,
    passwordPolicy: ['minLength', 'requireNumber', 'requireLetter']
  })
  
  Object.assign(notificationSettings, {
    emailEnabled: false,
    smtpServer: '',
    smtpPort: 587,
    senderEmail: '',
    events: ['upload', 'error']
  })
  
  ElMessage.success('设置已重置')
}

// 导出配置
const exportSettings = () => {
  const config = {
    basic: basicSettings,
    storage: storageSettings,
    player: playerSettings,
    security: securitySettings,
    notification: notificationSettings
  }
  
  const blob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'media-system-config.json'
  link.click()
  URL.revokeObjectURL(url)
  
  ElMessage.success('配置文件已导出')
}
</script>

<style scoped>
.settings-page {
  padding: 0;
}

.settings-actions {
  margin-top: 24px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #e8e8e8;
}

.settings-actions .el-button {
  margin: 0 8px;
}
</style> 